<template>
	<view class="page-box">
		<uni-cusTitle title=' ' :isIcon='true'></uni-cusTitle>

		<view class="lunbo-box">
			<view class="wh100 swiper-tem">
				<swiper class="wh100" @change="change" :current="swiperDotIndex" autoplay circular :interval='2000'>
					<swiper-item v-for="(item, index) in swiperList" :key="index" @click="itemTap(item,index)">
						<view class="wh100">
							<image class="wh100" :src="item.cover_imgurl"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="pages-box"> {{current+1}} / {{swiperList.length}} </view>
			</view>
		</view>

		<view class="detail-box">
			<view class="title">urban camp</view>
			<view class="fen-box">
				<image src="/static/index/fenshu.png"></image>
				<view class="s-fen-box">
					<!-- <image src="/static/sy1.png"></image> -->
					<uni-icons type="star-filled" size="16" color="#FFDD57" style="margin-right: 3rpx;"></uni-icons>
					<text>4.5</text>分
				</view>
			</view>

			<view class="time-box">
				<view class="left">
					<image src="/static/time.png"></image>
					<text class="title">营业中</text>
					<text class="time">周一至周日 08:30-18:00</text>
				</view>
				<text class="line"></text>
				<view class="right">
					<image src="/static/time.png"></image>
					<text class="title">¥200/人起</text>
				</view>
			</view>

			<view class="phone-box">
				<view class="item" @click="phoneTap">
					<view class="top">
						<view class="pos-title">联系电话</view>
						<text>{{detail.phone}}</text>
					</view>
					<view class="bom">
						<uni-icons type="phone-filled" color='#884FFF' size="30"></uni-icons>
						<text>联系TA</text>
					</view>
				</view>
				<view class="item" @click="mapTap">
					<view class="top">
						<view class="pos-title">门店地址</view>
						<text class="line-two" style="font-size: 26rpx;">{{detail.addr}}</text>
					</view>
					<view class="bom">
						<uni-icons type="paperplane-filled" color='#884FFF' size="30"></uni-icons>
						<text>距您1.8Km</text>
					</view>
				</view>
			</view>

			<view class="tese-box">
				<image src="/static/tese.png"></image>
				<text>特色</text>
			</view>

			<view class="tese-list">
				<view class="item" v-for="(item,index) in list" :key='index'>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="goToApp" @click="goToApp">
			<text>去店铺逛逛</text>
			<image src="/static/xinz/jt.png" class="go"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$base.staticUrl,
				current: 0,
				swiperList: [{
						cover_imgurl: '/static/share.jpg'
					},
					{
						cover_imgurl: '/static/logo.png'
					},
					{
						cover_imgurl: '/static/top_back.png'
					}
				],

				list: [{
						num: 136,
						name: '智尚影院床房'
					},
					{
						num: 36,
						name: '智尚影院床房'
					},
					{
						num: 25,
						name: '智尚影院'
					},
					
				],

				detail: {
					phone: '18762898233',
					addr: '华侨路街道管家桥明华新村15号楼1层',
					latitude: 39.908,
					longitude: 116.396
				}
			}
		},

		onLoad() {

		},
		methods: {
			// 跳转店铺小程序
			goToApp(){
				uni.navigateToMiniProgram({
					// appId 要打开的小程序 appId（百度小程序则填写App Key）
					// path:打开的页面路径，如果为空则打开首页
					// extraData 需要传递给目标小程序的数据，目标小程序可在 App.vue 的 onLaunch或onShow 中获取到这份数据。
				  appId: 'wxlfeec4e32ba3b0c6',
				  path: 'pages/index/index?id=123',
				  extraData: {
				    'data1': 'test'
				  },
				  success(res) {
				    // 打开成功
				  }
				})
			},
			change(e) {
				this.current = e.detail.current;
			},

			phoneTap() {
				uni.makePhoneCall({
					phoneNumber: this.detail.phone
				});
			},

			mapTap() {
				uni.openLocation({
					latitude: this.detail.latitude * 1,
					longitude: this.detail.longitude * 1
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.goToApp{
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		border: 4rpx solid #FFDD57;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		width:calc(100% - 64rpx);
		margin: 0 auto;
	
		font-weight: normal;
		color: #002A3A;
		line-height: 96rpx;
		.go{
			width:48rpx;
			height: 48rpx;
		}
	}
	.lunbo-box {
		width: 100%;
		height: 512rpx;
		position: relative;

		.pages-box {
			width: 80rpx;
			height: 40rpx;
			position: absolute;
			bottom: 80rpx;
			right: 26rpx;
			background: #FFFFFF;
			border-radius: 21rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			font-size: 26rpx;
			font-weight: bold;
			color: #000;
		}
	}

	.detail-box {
		width: 100%;
		padding: 36rpx 30rpx;
		box-sizing: border-box;
		margin-top: -60rpx;
		position: relative;
		background: #FAEDFC;
		border-top-right-radius: 64rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			line-height: 56rpx;
		}

		.fen-box {
			position: relative;
			margin-top: 15rpx;

			>image {
				width: 138rpx;
				height: 40rpx;
				position: absolute;
				left: 0;
			}

			.s-fen-box {
				width: 138rpx;
				height: 40rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #FFDD57;

				image {
					width: 20rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 33rpx;
					font-family: AaHouDiHei;
					font-weight: bold;
					margin-top: -5rpx;
				}
			}
		}

		.time-box {
			width: 100%;
			height: 152rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			border: 4rpx solid #FFDD57;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 52rpx;

			.left {
				width: 2rpx;
			}

			.line {
				width: 2rpx;
				height: 104rpx;
				border-right: 2rpx solid #FFDD57;
			}

			view {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				.title {
					font-size: 28rpx;
					font-weight: bold;
					color: #884FFF;
					line-height: 42rpx;
				}

				.time {
					font-size: 24rpx;
				}
			}
		}

		.phone-box {
			width: 100%;
			height: 244rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 48rpx 0;

			.item {
				width: 332rpx;
				height: 100%;
				background: #FFDD57;
				border-radius: 40rpx;
				display: flex;
				padding-top: 5rpx;
				flex-direction: column;
				align-items: center;

				.top {
					width: 96%;
					height: 160rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					font-size: 36rpx;
					position: relative;
					background: #fff;
					border-radius: 40rpx;
					padding: 0 30rpx;
					padding-top: 30rpx;
					box-sizing: border-box;
					text-align: center;

					text {
						margin-top: 16rpx;
					}

					.pos-title {
						width: 160rpx;
						height: 52rpx;
						background: #FFDD57;
						border-radius: 0rpx 0rpx 24rpx 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						font-size: 26rpx;
						color: #884FFF;
						font-weight: bold;
						position: absolute;
						top: 0;
						left: 50%;
						transform: translateX(-50%);
					}
				}

				.bom {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #884FFF;

					text {
						margin-left: 6rpx;
					}
				}
			}
		}

		.tese-box {
			width: 100%;
			height: 60rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #002A3A;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 36rpx 0 26rpx;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}
		}

		.tese-list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.item {
				padding:10rpx 26rpx;
			
				background: #FFDD57;
				border-radius: 40rpx;
				font-size: 26rpx;
				margin-right:26rpx;
				margin-bottom: 26rpx;
				color: #884FFF;
				font-weight: bold;
			}
		}
	}
</style>